<template>
	<simple-layout
		ref="simpleLayoutRef"
		class="simple-layout-common-box"
		:inputSearch="inputSearch"
		:isUseCheck="false"
		@toSearch="onSearch"
	>
		<template #content>
			<top-bottom-layout>
				<template #top>
					<scroll-list
						panel="office"
						command="nodeList"
						ref="scrollList"
						:singleAndMult="true"
						:firstLoadSearch="firstLoadSearch"
						:showOtherProp="true"
						disabledProp="canSelected"
						:isNotDisableProp="false"
						@toCheckValueClickProp="onCheckValueClickProp"
					>
					</scroll-list>
				</template>
				<template #middle></template>
				<template #bottom>
					<scroll-list
						panel="office"
						command="roleList"
						ref="scrollListRole"
						:firstLoadSearch="firstLoadSearchRole"
						:showOtherProp="true"
					>
					</scroll-list>
				</template>
			</top-bottom-layout>
		</template>
	</simple-layout>
</template>

<script>
import SimpleLayout from '@/components/simpleLayout.vue';
import topBottomLayout from '@/components/topBottomLayout.vue';
import scrollList from '@/components/scrollList';

export default {
	name: 'office',
	components: {
		SimpleLayout,
		topBottomLayout,
		scrollList
	},
	data() {
		return {
			inputSearch: {
				placeText: this.$i18n('selectPeople.input',this.$i18n('office.selectPeople.extend'))
			},

			firstLoadSearch: true,
			firstLoadSearchRole: false

		};
	},
	methods: {
		onSearchData(data) {
			this.$refs.scrollList.search(data);
		},
		onSearchRoleData(data) {
			this.$refs.scrollListRole.search(data);
		},
		onCheckValueClickProp(data) {
			this.onSearchRoleData({ nodeName: data.id });
		},
		onSearch(val) {
			this.$refs.scrollListRole.initProps();
			this.onSearchData({ keyword: val });
		},
		onChangeAccount(data) {
			this.$refs.simpleLayoutRef.onChangeAccount(data);
		}
	}
};
</script>

<style scoped lang="scss">

</style>
